<script>
import Servers from './components/Servers.vue'
import Price from './components/Price.vue'

export default{
    components:{
        Servers,
        Price
    },
    data(){
        return {
          waitting:false,
            activate_left_sidebar_list:{
                list:{
                    'servers':true,
                    'price':false
                },
                now:"servers",
                err:""
            }
        }
    },
    methods:{
        change_activate_left_sidebar_list(arg){
            if(this.activate_left_sidebar_list.now != null){
                this.activate_left_sidebar_list.list[this.activate_left_sidebar_list.now] = false
            }
            this.activate_left_sidebar_list.now = arg
            this.activate_left_sidebar_list.list[arg] = true
        },
        need_wait(){
          console.log("need_wait")
          this.waitting = true
        },
        neednt_wait(){
          console.log("neednt_wait")
          this.waitting = false
        },
        set_err(info){
          this.err = info
        }
    },
    provide(){
      return{
        need_wait:this.need_wait,
        neednt_wait:this.neednt_wait,
        set_err:this.set_err
      }
    }
}
</script>

<template>
  <div id="contanier">
    <div id="top_sidebar" class="sidebar" :style="{color:waitting?'red':'blue'}">车辆交易价格预测系统</div>
    <div id="left_sidebar" class="sidebar">
      <p class="left_sidebar_list"  @click.stop="change_activate_left_sidebar_list('servers')" :class="{unit_active: activate_left_sidebar_list.list.servers}">[servers]</p><br>
      <p class="left_sidebar_list" @click.stop="change_activate_left_sidebar_list('price')" :class="{unit_active: activate_left_sidebar_list.list.price}">[price]</p>
    </div>
    <div id="content" class="sidebar">
        <Servers v-if="activate_left_sidebar_list.list['servers']"/>
        <Price v-if="activate_left_sidebar_list.list['price']"/>
    </div>
    <div id="bottom_sidebar" class="sidebar" style="text-align: left;"><span style="color: green;">[由04082002班2020211782制作]]]</span><span style="color: red;">{{ err }}</span></div>
  </div>
</template>

<style scoped>
#contanier{
  height: 942px;
  width: 1900px;
  background-image: url(https://pics5.baidu.com/feed/bba1cd11728b4710fcc1b9a4a92e64f6fe0323d3.jpeg@f_auto);
  background-size: 1900px 930px;
}
#top_sidebar{
  font-size: 50px;
}
#left_sidebar{
  height: 835px;
  width: 100px;
  font-size: 45px;
  float: left;
}
.left_sidebar_list{
  font-size: 25px;
}
#bottom_sidebar{
  clear: both;
}
.sidebar{
    border-style: solid;
    border-color: yellow;
}
</style>
<style>
.sidebar{
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
}
#content{
  height: 835px;
  width: 1768px;
  float: left;
}
.unit_active{
    border-style: solid;
    border-color: yellow;
    border-color: blue;
    color: blue;
}
</style>
